import React, {Component} from 'react'
import {View, Text, Modal, TouchableOpacity, Linking} from 'react-native'
import PopUp from './PopUp.js'
function Alert(props) {
  const {sWrap, sItemWrap, sButton, sButtonText, sTitle, sTitleText} = ChooseTravelTypePopStyle;
  const {conf, onConfirm} = props
  return (
    <PopUp show={conf.show}>
      <TouchableOpacity activeOpacity={1} style={sWrap} onPress={() => conf.hidePop()}>
        <View style={sItemWrap}>
          <View style={sTitle}><Text style={sTitleText}>{conf.title}</Text></View>
          <View>
            <TouchableOpacity onPress={() => {
              onConfirm && onConfirm();
              conf.hidePop();
            }}>
              <Text style={sTitleText}>{conf.confirmText || '确认'}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    </PopUp>
  )
}
function Confirm(props) {
  console.log(props)
  const {sWrap, sItemWrap, sButton, sButtonText, sTitle, sTitleText} = ChooseTravelTypePopStyle;
  const {conf} = props
  console.log(props)
  return (
    <PopUp show={conf.show}>
      <TouchableOpacity activeOpacity={1} style={sWrap} onPress={conf.back}>
        <View style={sItemWrap}>
          <View style={sTitle}><Text style={sTitleText}>{conf.title}</Text></View>
          <View>
            <TouchableOpacity><Text style={sTitleText}>{conf.cancleText || '取消'}</Text></TouchableOpacity>
            <TouchableOpacity><Text style={sTitleText}>{conf.confirmText || '确认'}</Text></TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    </PopUp>
  )
}

export class PopUnion extends Component {
  render(){
    const renderFn = {
      alert: () => <Alert {...this.props}/>,
      confirm: () => <Confirm  {...this.props}/>
    }[this.props.popType];
    return (
      renderFn ? renderFn() : <View/>
    )
  }
}
export function PopUnionConf(scope, keyPath = 'popUnionConf') {
  this.scope = scope;
  this.popType = undefined;
  this.keyPath = keyPath;
  this.show = false;
  this.title = ''
  this.confirmText = ''
  this.cancleText = ''

}
PopUnionConf.prototype.showPop = function (conf) {
  Object.keys(conf).forEach(item => this[item] = conf[item])
  this.show = true;
  this.setState()
}
PopUnionConf.prototype.hidePop = function () {
  this.show = false;
  this.setState()
}
PopUnionConf.prototype.setState = function () {
  const state = {};
  state[this.keyPath] = this;
  this.scope.setState(state)
}

export default {
  PopUnion,
  PopUnionConf,
}
const ChooseTravelTypePopStyle = {
  sWrap: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,.3)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  sItemWrap: {
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
    width: 300,
    padding: 10
  },
  sTitle: {
    borderColor: '#eee',
    borderBottomWidth: 1,
    borderStyle: 'solid',
  },
  sContent: {
  },
  sTitleText: {
    textAlign: 'center',
    padding: 10
  },
  sButton: {
    // width: 100,
    alignItems: 'center',
    backgroundColor: '#009adf',
  },
  sButtonText: {
    lineHeight: 40,
    color: '#fff'
  },
}
